<template>
  <!-- <div style="height:540px"> -->
  <div style="padding-bottom:12px"> 
    <div class="fontWeight biaoti">企业佣金趋势图<el-tooltip class="item" effect="dark" content="只支持查询一年内的数据" placement="right"><i class="el-icon-question tipQuestion"></i></el-tooltip></div>
    <div class="flex flex-end mt20 mb55">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item prop="companyId">
              <el-select style="width:200px" v-model="queryParams.companyId" class="mr10" placeholder="请选择客户企业" clearable filterable @change="change">
                <el-option
                  v-for="dict in companyOperationSelect"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="operationIds" v-if="isShow">
              <el-select  style="width:220px" v-model="queryParams.operationIds" multiple collapse-tags placeholder="请选择账号" clearable  filterable>
                <el-option
                  v-for="dict in account"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="startDate">
              <el-date-picker
              style="width:135px"
              v-model="queryParams.startDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始日期"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item>-</el-form-item>
            <!-- <span style="padding:7px 5px">-</span> -->
          <el-form-item prop="endDate">
              <el-date-picker
              style="width:135px"
              v-model="queryParams.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束日期"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery" style="padding:10px">搜索</el-button> -->
            <el-button icon="el-icon-search" size="medium" @click="handleQuery"  style="padding:10px">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
   </div>
    <!-- <div :class="className" :style="{height:height,width:width}" /> -->
    <div style="height:380px;width:100%" id="myChart_line"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { commissionCompanyTrend } from "@/api/index";
export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '350px'
  //   },
  //   autoResize: {
  //     type: Boolean,
  //     default: true
  //   },
  //   chartData: {
  //     type: Object,
  //     required: true
  //   }
  // },
  data() {
    return {
      chart: null,
      isShow:false,
      // 查询参数
      queryParams: {
        companyId: undefined,
        operationIds: undefined,
        startDate: undefined,
        endDate: undefined,
      },
      pickerOptions: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let twelve = 366 * 24 * 3600 * 1000;
                let twelveMonths = curDate - twelve;
                return time.getTime() > Date.now() || time.getTime() < twelveMonths;
            }
      },
      companyOperationSelect: [], // 所有客户企业下拉列表信息数据字典数据
      account:[]
    }
  },
  // watch: {
  //   chartData: {
  //     deep: true,
  //     handler(val) {
  //       this.setOptions(val)
  //     }
  //   }
  // },
  mounted() {
    this.$nextTick(() => {
      //this.initChart()
      this.getList()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.getCompanyOperationSelect().then(response => {
      this.companyOperationSelect = response.data;
    });
    this.getStartDateValue();
    this.getEndDateValue();
  },
  methods: {
    getStartDateValue(){
          var now = new Date();
          var year = now.getFullYear();// 得到年份
          var month = now.getMonth(); // 得到月份
          var date = now.getDate(); // 得到日期
          var month = month;
          var month = month.toString().padStart(2, '0');
          var date = date.toString().padStart(2, '0');
          var defaultDate = `${year}-${month}-${date}`;
          this.queryParams.startDate = defaultDate;
    },
    getEndDateValue(){
          var now = new Date()
          var year = now.getFullYear() // 得到年份
          var month = now.getMonth() // 得到月份
          var date = now.getDate() // 得到日期
          month = month + 1
          month = month.toString().padStart(2, '0')
          date = date.toString().padStart(2, '0')
          var defaultDate = `${year}-${month}-${date}`
          this.queryParams.endDate = defaultDate
    },
    change(e){
      delete this.queryParams.operationIds
      if(e){
        this.isShow = true;
        this.account = this.companyOperationSelect.filter(item => item.id === e)[0].children;
      }else{
        this.isShow = false
      }
    },
    getList() {
      commissionCompanyTrend(this.queryParams).then((response) => {
        this.chart = echarts.init(document.getElementById('myChart_line'), 'macarons')
        //this.setOptions(this.chartData)
        this.chart.setOption({
         
          xAxis: {
            data: response.data.xaxisData,
            boundaryGap: false,
            axisLabel: {
                // interval:0,  
                // rotate:45,  
                show: true,
                textStyle: {
                    color: '#333'
                },
                formatter: function (value) {//在这里写你需要的时间格式
                  var t_date = new Date(value);
                  return [t_date.getMonth() + 1 < 10 ? '0'+(t_date.getMonth()+1) : t_date.getMonth()+1, t_date.getDate() < 10 ? '0'+(t_date.getDate()) : t_date.getDate()].join('-')
                }
            },
            axisTick: {
              show: true,
              lineStyle: {
                  color: '#d0d0d0'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                  color: '#d0d0d0'
              }
            }
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            // backgroundColor: "#fff",
            // color:'black',
            // borderWidth: "1", //边框宽度设置1
            // extraCssText:'box-shadow:0 0 18px #eee',
            textStyle: {
              fontSize: "12" //设置文字颜色
            },
            axisPointer: {            // Use axis to trigger tooltip
                  type: 'none',        // 'shadow' as default; can also be 'line' or 'shadow'
            },
            formatter: function (param) {
              //console.log(JSON.stringify(param));
              var money = response.data.seriesDataDetail[param[0].dataIndex];
              
              //var totalMoney = money ? money.totalMoney : 0; parseFloat(successMoney/10000).toFixed(2)
              //var successMoney = money ? money.successMoney : 0;
              //var failMoney = money ? money.failMoney : 0;
              if (money.totalMoney >= 100000000) {
                var totalMoney = parseFloat(money.totalMoney / 100000000).toFixed(2) + "亿";
              } else if (money.totalMoney >= 10000) {
                var totalMoney = parseFloat(money.totalMoney / 10000).toFixed(2) + "万";
              } else {
                 var totalMoney = money.totalMoney;
              }
              
              if (money.successMoney >= 100000000) {
                var successMoney = parseFloat(money.successMoney / 100000000).toFixed(2) + "亿";
              } else if (money.successMoney >= 10000) {
                var successMoney = parseFloat(money.successMoney / 10000).toFixed(2) + "万";
              } else {
                 var successMoney = money.successMoney;
              }

              if (money.failMoney >= 100000000) {
                var failMoney = parseFloat(money.failMoney / 100000000).toFixed(2) + "亿";
              } else if (money.failMoney >= 10000) {
                var failMoney = parseFloat(money.failMoney / 10000).toFixed(2) + "万";
              } else {
                 var failMoney = money.failMoney;
              }

              var count = response.data.seriesDataDetail[param[0].dataIndex];
              var totalCount = count ? count.totalCount : 0;
              var successCount = count ? count.successCount : 0;
              var failCount = count ? count.failCount : 0;
              if(param[0].seriesName == "金额"){
                  return param[0].axisValue + "<br>" + "<strong>总金额：" + totalMoney+ "</strong><br>" + "成功：" + successMoney + "<br>"+ "失败：" + failMoney;
              }else if(param[0].seriesName == "笔数"){
                  return param[0].axisValue + "<br>" + "<strong>总笔数：" + totalCount+ " 笔</strong><br>" + "成功：" + successCount + " 笔<br>"+ "失败：" + failCount + " 笔";
              }
            }
          },
          yAxis: [{
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333'
                },
                // formatter: '{value}w'
                formatter: function (value) {
                  if (value >= 100000000) {
                    return value / 100000000 + "亿";
                  } else if (value >= 10000) {
                    return value / 10000 + "万";
                  } else {
                    return value;
                  }
                },
            },
            splitLine: {
                show: true,
                lineStyle:{
                  color: '#f0f0f0',
                  width: 1,
                  type: 'solid'
              }
        　　},
            splitArea: {
                show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          {
            type: 'value',
            minInterval: 1,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333'
                },
                formatter: '{value}笔'
            },
            splitLine: {
                show: true,
                lineStyle:{
                  color: '#f0f0f0',
                  width: 1,
                  type: 'solid'
              }
        　　},
            splitArea: {
                show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }],
          legend: {
            data: ['金额', '笔数'],
            icon:'rect',
            itemWidth: 22,  // 设置icon宽度
            itemHeight: 3, // 设置icon高度
            itemGap: 44, // 设置间距
            textStyle: {
              color: "#333"
            },
            selectedMode:'single'
          },
          series: [{
            name: '金额',
            itemStyle: {
              normal: {
                color: '#045aff',
                lineStyle: {
                  color: '#045aff',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            hoverAnimation: false,
            // data: moneyData,
            yAxisIndex: 0,
            data:response.data.seriesMoneyData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          },
          {
            name: '笔数',
            itemStyle: {
              normal: {
                color: '#045aff',
                lineStyle: {
                  color: '#045aff',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: '#ee2750',
                lineStyle: {
                  color: '#ee2750',
                  width: 2
                }
                
              }
            },
            //data: countData,
            yAxisIndex: 1,
            data: response.data.seriesCountData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        })
      }).catch(()=>{});
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    // initChart() {
     
    // },
    // setOptions({ moneyData, countData } = {}) {
    //   this.chart.setOption({
        
    //   })
    // }
  }
}
</script>
<style scoped lang="scss">
    @media screen and (max-width: 480px) {
      .mb55{
        margin-bottom:0;
      }
    }
</style>